<template>
  <div class="indexbottomcard">
    <div v-for="(item,index) in goodList" :key="index">
      <div class="indexbottomcard-title">
        <h3>{{item[0].type}}</h3>
      </div>
      <ul class="clear_fix">
        <li
          class="indexbottomcard-item"
          v-for="(item,index) in item"
          :key="index"
          @click="goitem(item.good_id)"
        >
          <div>
            <div class="item-pic">
              <a>
                <img :src="item.src.slice(1, 71)" alt />
              </a>
            </div>
            <div class="item-info">
              <p class="info-name">{{item.message}}</p>
              <div class="info-price">
                <strong>￥{{ item.price }}</strong>
                {{item.size}}
                <i></i>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引用indexgoodApi接口
import indexgoodApi from "@/api/indexgoodApi";
export default {
  data() {
    return {
      page: 1,
      pagesize: 6,
      type: ["新鲜水果", "粮油杂货", "方便速食", "海鲜水产", "精选肉类"],
      goodList: [] // [Array(6), Array(6), Array(6)]
    };
  },

  components: {},

  methods: {
    goitem(good_id) {
      //console.log(good_id);
      this.$router.push("/details?" + good_id);
    }
  },
  created() {
    let List = [];
    this.type.forEach(item => {
      indexgoodApi
        .getTypelist(this.page, this.pagesize, item)
        .then(res => {
          res.data;
          List.push(res.data.data);
          this.goodList = List;
          // console.log(this.goodList, "$$$$$$$$$$$$$");
          //   console.log(this.goodList[0][0].type, "$$eaeda");
        })
        .catch(err => {
          console.log(err);
        });
    });
  }
};
</script>

<style scoped>
.indexbottomcard {
  background: #fff;
}
.indexbottomcard-title {
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  font-size: 12px;
}
.indexbottomcard-title > h3 {
  position: relative;
  display: inline-block;
  padding: 0 0.015rem;
  font-size: 12px;
  font-weight: bold;
}
.indexbottomcard-title > h3::before {
  position: absolute;
  top: 50%;
  left: -0.2rem;
  display: block;
  width: 0.18rem;
  height: 0.02rem;
  margin-top: -1px;
  content: "";
  background: url("../../assets/img/indexbottomcard-li.png") no-repeat;
  background-size: auto 100%;
}
.indexbottomcard-title > h3::after {
  position: absolute;
  top: 50%;
  left: 0.52rem;
  display: block;
  width: 0.18rem;
  height: 0.02rem;
  margin-top: -1px;
  content: "";
  background: url("../../assets/img/indexbottomcard-li.png") no-repeat;
  background-size: auto 100%;
  right: -0.7rem;
  transform: rotate(180deg);
}
.indexbottomcard > ul {
  overflow: hidden;
  padding: 0.095rem;
}
.indexbottomcard-item {
  float: left;
  width: 50%;
  padding: 0.04rem;
}
.indexbottomcard-item > div {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 0.05rem;
  background: #fff;
}
.item-pic {
  width: 100%;
  position: relative;
}
.item-pic > a > img {
  width: 100%;
  border-radius: 0.05rem;
}
.item-info {
  padding: 0 0.085rem 0.1rem;
  text-align: left;
}
.info-name {
  font-size: 12px;
  color: #333;
  margin-top: 0.05rem;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info-price {
  margin-top: 0.07rem;
  font-size: 12px;
  line-height: 0.2rem;
  color: #aaa;
  position: relative;
  text-align: left;
}
.info-price > strong {
  margin-right: 0.025rem;
  font-size: 12px;
  font-weight: bold;
  color: #fb3d3d;
}
.info-price > i {
  width: 0.22rem;
  height: 0.22rem;
  background: url("../../assets/img/indexcart.png") no-repeat;
  background-size: 100% 100%;
  background-color: #01b27a;
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  right: 5px;
}
</style>